<template>
  <div class="export_excel">
    <div class="export_excel_T">
      <label>
        <span>文件名：</span>
        <el-input
          style="width: 340px"
          placeholder="请输入文件名"
          prefix-icon="el-icon-document"
          v-model="filename"
        ></el-input>
      </label>
      <el-button style="margin-left: 15px" type="primary" @click="handleExport"
        >导出excel</el-button
      >
    </div>
    <div class="export_excel_C">
      <el-table
        :data="tableData"
        border
        highlight-current-row
        style="width: 100%"
        ref="table"
        current-row-key="id"
        row-key="id"
        key="id"
        column-key="id"
        :header-cell-style="{ 'text-align': 'center' }"
        :cell-style="{ 'text-align': 'center' }"
        @selection-change="selectionChange"
      >
        <!-- <el-table-column
          current-row-key="id"
          row-key="id"
          column-key="id"
          key="id"
          type="selection"
        >
        </el-table-column> -->
        <el-table-column prop="id" label="id" width="50"> </el-table-column>
        <el-table-column prop="date" label="日期" show-overflow-tooltip>
        </el-table-column>
        <el-table-column prop="name" label="姓名"> </el-table-column>
        <el-table-column prop="img" label="图片" width="100">
          <template slot-scope="scope">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: center;
              "
            >
              <el-image
                :src="scope.row.img"
                style="max-width: 80px; max-height: 80px; border-radius: 5px"
                :preview-src-list="tableData.map((v) => v.img)"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="province" label="省份"> </el-table-column>
        <el-table-column prop="city" label="市区"> </el-table-column>
        <el-table-column prop="address" label="地址" width="300">
        </el-table-column>
        <el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [],
      filename: "",
    };
  },
  mounted() {
    this.tableData = this.reqData();
  },
  methods: {
    /**
     *  格式数据
     *  @filterVal  格式头
     *  @tableData  用来格式的表格数据
     */
    formatJson(filterVal, tableData) {
      return tableData.map((v) => {
        return filterVal.map((j) => {
          return v[j];
        });
      });
    },
    handleExport() {
      this.downloadLoading = true;
      import("@/utils/plug-in/Export2Excel").then((excel) => {
        var tHeader = ["日期", "姓名", "省份", "市区", "地址", "邮编", "图片"];
        var filterVal = [
          "date",
          "name",
          "province",
          "city",
          "address",
          "zip",
          "img",
        ];
        var data = this.formatJson(filterVal, this.tableData);
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: this.filename || "表格",
          autoWidth: true,
        });
        this.downloadLoading = false;
      });
    },
    // 请求
    reqData() {
      var data = [];
      for (let index = 1; index <= 20; index++) {
        data.push({
          id: index,
          date: Date.now(),
          name: "迪丽热巴",
          province: "上海",
          city: "普陀区",
          address: "上海市普陀区金沙江路 1518 号",
          zip: 200333,
          img:
            index % 2 == 0
              ? "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2340175123,3483783040&fm=26&gp=0.jpg"
              : "http://pic1.win4000.com/pic/1/18/0d7870d6bf.jpg",
        });
      }
      return data;
    },
    selectionChange(selection) {
      this.selectionLength = selection.length;
    },
  },
};
</script>

<style lang="scss" scoped>
.export_excel {
  .export_excel_T {
    text-align: left;
    margin-bottom: 20px;
  }
}
</style>